<template>
  <div>

    <div v-if="college.length == 0">
      <div class="box">
        <div @click="show1" class="butt">点击选择学院</div>
      </div>
      <!-- <van-button type="info" @click="show1">默认按钮</van-button> -->
      <van-popup v-model="show" position="bottom" overlay>
        <van-picker
        show-toolbar
        title="选择学院"
        :columns="columns"
        @cancel="onCancel"
        @confirm="onConfirm"
      />
      </van-popup>
    </div>

    <div v-if="college.length">
      <div class="box2">
        <form action="/">
          <van-search
            v-model="value"
            placeholder="请输入搜索关键词"
            show-action
            @search="onSearch"
            @cancel="onCancel2"
          />
        </form>

        <div class="collapse">
          <div class="box3">
            <van-collapse v-model="activeNames">
              <van-collapse-item name="1" is-link>
                <div slot="title">
                  <div class="label">标题：参加科学技术大赛</div>
                  <div class="describe">
                    <div class="bottom1">
                      <div>类别：急急急</div>
                      <div class="people">创建人: 大哥</div>
                    </div>
                    <div class="bottom">
                      <div>内容: 藏家</div>
                      <div class='uploading' @click="uploading">查看</div>
                    </div>
                  </div>
                </div>
                提供多样店铺模板，快速搭建网上商城
              </van-collapse-item>
            </van-collapse>
          </div>

           <div class="box3">
            <van-collapse v-model="activeNames">
              <van-collapse-item name="2" is-link>
                <div slot="title">
                  <div class="label">标题：参加科学技术大赛</div>
                  <div class="describe">
                    <div class="bottom1">
                      <div>类别：急急急</div>
                      <div class="people">创建人: 大哥</div>
                    </div>
                    <div class="bottom">
                      <div>内容: 藏家</div>
                      <div class='uploading' @click="uploading">查看</div>
                    </div>
                  </div>
                </div>
                提供多样店铺模板，快速搭建网上商城
              </van-collapse-item>
            </van-collapse>
          </div>

          
          
        </div>

      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: 'SelectCollege',
  data () {
    return {
      columns: ['计算机学院', '外国语学院', '建工学院', '艺术学院', '文传学院', '商学院', '财金学院', '体育学院', '大数据学院', '国际学院'],
      show: false,
      college:'',
      value:'',
      activeNames: ['0'],
    }
  },
  methods: {
    onConfirm(value, index) {
      this.college = value
      console.log(this.college);
    },
    onCancel() {
      this.show = false
    },
    show1(){
      this.show = true
    },
    onSearch(){
      this.$toast(this.value)
    },
    onCancel2(){
      this.value = ''
    },
    uploading(e) {
      e = e || window.event;  
      if(e.stopPropagation) { //W3C阻止冒泡方法  
          e.stopPropagation();  
      } else {  
          e.cancelBubble = true; //IE阻止冒泡方法  
      }
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .box{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 12rem;
  }
  .butt{
    width: 8rem;
    height: 2rem;
    background-color: rgb(24, 23, 23);
    opacity:0.5;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 1rem;
    color: rgb(182, 177, 177);
    font-weight: bolder;
    font-size: 1rem;
    box-shadow: 1px 1px 2px #888888;
  }
  .box2{
    margin-top: 46px;
  }
  .box3{
    margin-bottom: 1rem
  }
  .label{
    font-size: 0.9rem;
    font-weight: bold
  }
  .describe{
    font-size: 0.8rem;
    color: rgb(172, 167, 167)
  }
  .uploading{
    color: #1C5697;
    font-weight: bold;
  }
  .bottom{
    display: flex;
    justify-content:space-between
  }
  .bottom1{
    display: flex;
    justify-content:flex-start
  }
  .collapse{
    margin-bottom: 55px;
    margin-top: 5px;
  }
  .people{
    margin-left: 8px;
  }
</style>
